<template>
  <div>
    <div class="swiper-b">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>

    <div class="cartList">
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
        <van-swipe-cell v-for="item in goodsList" :key="item.id">
          <van-cell class="sell" :border="false">
            <div class="container">
              <div class="left">
                <van-checkbox
                  :name="item.id"
                  checked-color="#b4282d"
                ></van-checkbox>
                <div class="img"><img :src="item.list_pic_url" alt="" /></div>
                <div class="info">
                  <p>{{ item.goods_name }}</p>
                  <p>￥{{ item.retail_price }}</p>
                </div>
              </div>
              <div class="right">
                <div class="num">x{{ item.number }}</div>
              </div>
            </div>
          </van-cell>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="delGoods(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <div class="fixed">
      <div class="container">
        <van-checkbox
          @click="checkAll"
          checked-color="#b4282d"
          :value="allChecked"
          >全选</van-checkbox
        >
      </div>
      <div class="right">
        <div class="price">￥{{ total }}</div>
        <div class="submit" @click="goOrder">下单</div>
      </div>
    </div>

    <tab></tab>
  </div>
</template>

<script>
import tab from "../all/rt.vue";
import { cartList } from "@/api/cart/cartList.js";
import { deleteAction } from "@/api/cart/del.js";
import { submitAction } from "@/api/cart/submit.js";
import { Dialog } from "vant";
import { Notify } from "vant";
import { Toast } from 'vant';
export default {
  props: {},
  data() {
    return {
      checked: [],
      goodsList: [],
      goodsId: "",
    };
  },
  computed: {
    allChecked() {
      if (this.checked.length >= this.goodsList.length) {
        return true;
      } else {
        return false;
      }
    },
    total() {
      var sum = 0;
      this.goodsList.forEach((item) => {
        if (this.checked.includes(item.id)) {
          sum += item.number * item.retail_price;
        }
      });
      return sum;
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
  watch: {},
  methods: {
    getList() {
      cartList({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.goodsList = res.data;
        console.log(this.goodsList);
      });
    },
    checkAll() {
      console.log(this.checked);
      this.allChecked
        ? this.$refs.checkboxGroup.toggleAll(false)
        : this.$refs.checkboxGroup.toggleAll(true);
    },
    delGoods(id) {
      Dialog.confirm({
        message: "是否删除？",
      })
        .then(() => {
          // on confirm
          deleteAction({
            id: id,
          }).then((res) => {
            console.log(res);
            this.getList();
          });
          Notify({ type: "danger", message: "删除成功", duration: 1000 });
        })
        .catch(() => {
          // on cancel
        });
    },

    goOrder() {
      //
      if(this.checked==''){
        Toast.fail('请选择商品')
      }else{
        this.goodsList.forEach((item) => {
        if (this.checked.includes(item.id)) {
          this.goodsId += item.goods_id;
        }
      });
      //   console.log(this.goodsId.replace(/(.{4})/g,'$1,'))
      this.goodsId = this.goodsId.replace(/(.{7})/g, "$1,").slice(0, -1);
      console.log(this.goodsId);
      submitAction({
        allPrise: this.total,
        goodsId: this.goodsId,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.$router.push("/cart/order");
      });

      }

      
    },
  },
  components: {
    tab: tab,
  },
};
</script>

<style lang="scss" scoped>
.swiper-b {
  width: 355px;
  height: 36px;
  margin: 0 auto;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
      0 no-repeat;
    background-size: 0.13333rem;
    padding-left: 0.2rem;
    display: flex;
    align-items: center;
    font-size: 0.33333rem;
    color: #666;
  }
}
.cartList {
  background-color: #fff;

  padding: 0 10px;
  margin-bottom: 40px;
}
.container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  p {
    font-size: 12px;
  }
  .left {
    display: flex;
    align-items: center;
    width: 80%;
    .img {
      width: 62px;
      height: 62px;
      padding-left: 10px;
      display: block;
      background: #f4f4f4;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      width: 50%;
      padding: 10px;
      p {
        line-height: 20px;
      }
    }
  }
  .right {
    padding-right: 25px;
  }
}
.fixed {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 50px;
  left: 0;
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: #fff;
  justify-content: space-between;
  padding: 0 10px;
}

.right {
  display: flex;
}
.price {
  color: #b4282d;
  padding: 20px;
}
.submit {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  background: #b4282d;
  color: #fff;
  margin-top: 22px;
}
</style>
<style>
.van-swipe-cell__right {
  margin-top: 35px;
}

.van-cell--borderless{
  padding-left: 0 !important;
  padding-right: 0;
  padding-bottom: 0;
}
</style>
